<template>
    <div>
        <h1>待办事项</h1>
        <!--条件渲染：如果没有事项，则显示暂无待办项-->
        <p v-if="todos.length ===0">暂无待办事项</p>
        <!--如果有，列表渲染：待办事项-->
        <ul v-else>
            <li v-for="(todo,index) in todos" :key="index">
                <!--v-bind绑定样式-->
                <span v-bind:style="{color: todo.completed ? green :'red'}"
                @click="togglecComplete(index)">
                {{ todo.text }}</span>
                <button @click="removeTodo(index)">删除</button>
            </li>
        </ul>
        <!--双向数据绑定：通过v-model输入绑定框-->
        <input v-model="newTodo" :placeholder="inputPlaceholder">
        <button @click="addTodo">添加</button>

        <!--内容渲染：显示待办事项数量-->
        <p>当前待办事项数量:{{ todos.length }}</p>
    </div>
</template>

<script setup>
import {ref} from 'vue'

//待办事项列表
const todos = ref([])

//输入框双向数据绑定
const newTodo = ref('')

//输入框的placeholder
const inputPlaceholder = ref('请输入待办事项')

//添加待办事项
const addTodo = () => {
    if(newTodo.value.trim() !== ''){
        todos.value.push({text: newTodo.value, completed:false})
        newTodo.value=''
    }
}

//删除待办事项
const removeTodo = (index) => {
    todos.value.splice(index,1)
}

//切换待办事项的完成状态
const togglecComplete = (index) => {
    todos.value[index].completed = !todos.value[index].completed
}
</script>
